import React, { useState } from 'react';
import {
  Input,
  Button,
  List,
} from 'antd';

interface Todo {
  id: number;
  value: string;
}

// FC >> Function Component
// SFC >> Stateless Function Component
// react vue3 svelte
export default function TodoList () {

  const [inputValue, setInputValue] = useState<string>('');
  const [list, setList] = useState<Todo[]>([]);

  function onChange (e: React.ChangeEvent<HTMLInputElement>) {
    setInputValue(e.target.value);
  }

  function onAdd () {
    setList(list.concat({
      id: Date.now(),
      value: inputValue,
    }));
  }

  function onRemove (id: number) {
    return function () {
      setList(list.filter(item => item.id !== id));
    }
  }

  function createListItem (item: Todo) {
    return (
      <List.Item>
        { item.value }
        <Button
          size="small"
          onClick={ onRemove(item.id) }
        >
          删除
        </Button>
      </List.Item>
    );
  }

  return (
    <>
      <Input
        className="w-80"
        type="text"
        value={ inputValue }
        onChange={ onChange }
      />
      <Button
        type="primary"
        onClick={ onAdd }
      >
        添加
      </Button>
      <List
        bordered
        dataSource={ list }
        renderItem={ createListItem }
      />
    </>
  );

}
